import React,{Component} from 'react';
import{
    View,
    Text,
    TouchableWithoutFeedback,
} from 'react-native'
import px2dp from '../config/pxToDp';

import Entypo from 'react-native-vector-icons/Entypo';
export default class HeaderChild extends Component{
    render(){
        return(
            <View style={styles.header}>
                <TouchableWithoutFeedback
                    onPress={this.props.clickBack}
                >
                    <View style={styles.left}>
                        
                            <Entypo name="chevron-thin-left" size={20} color="rgb(2,177,248)" style={styles.backIcon}/>
                        
                    </View>
                </TouchableWithoutFeedback>
                <View style={styles.content}>
                    <Text style={styles.title}>
                        {this.props.title}
                    </Text>
                </View>
                <TouchableWithoutFeedback  onPress={this.props.rightClick}>
                    <View style={styles.right} onPress={this.props.rightClick}>
                        <Entypo name="user" size={20} color="rgb(2,177,248)" style={styles.backIcon}/>
                    </View>
                </TouchableWithoutFeedback>
                

            </View>
        )
    }
}

const styles = {
    header:{
        height:56,
        borderBottomWidth:.4,
        borderColor:"rgb(220,220,220)",
        alignItems: 'center',
        flexDirection: 'row',
        backgroundColor:"#fff",
    },
    left:{
        flex:1.5
    },
    backIcon:{
        alignSelf: 'center',
    },
    title:{
        fontSize:18,
        alignSelf: 'center',
        color:"#333",
    },
    content:{
        flex:7
    },
    right: {
        flex: 1.5
    },
}